<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <h1>监听属性使用场景：比如 data 里的某些属性发现改变时，需要做一些处理，也可以比较新值和旧值的一些处理</h1>

        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>

        <hr>
        <p>a的值是：{{numbers.a}}</p>
        <button @click="numbers.a++">点我a+1</button>
        <br>
        <p>b的值是：{{numbers.b}}</p>
        <button @click="numbers.b++">点我b+1</button>
    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1,
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        // 计算属性computed能实现的功能，watch都可以完成，反之，计算属性不一定能完成，watch可以进行异步操作
        // 所有被vue管理的函数，最好写成普通函数，不被vue管理的函数(比如定时器回调函数，ajax回调函数等)，最好写出箭头函数
        watch: {
            // 也可以监视 info 属性，必须是存在的属性，才能监视，不存在的没法监视
            // 只要存在的属性都可以监视
            isHot: {
                // 设置初始化时调用
                immediate: true,
                // isHot 发生改变，handler 就会被调用
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            },
            // 监视多级结构中某个属性的变化
            'numbers.a': {
                handler() {
                    console.log('a被改变了')
                }
            },
            // 监视多级结构中所有属性的变化，不管层级多深的属性都可以监视
            numbers: {
                deep: true,  // 设置开启深入监听
                handler() {
                    console.log('numbers中的属性被改变了')
                }
            },


            // 监听属性简写写法
            isHot(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        },


    })

    // watch的另一种写法
    // vm.$watch('isHot', {
    //     // 设置初始化时调用
    //     immediate: true,
    //     // isHot 发生改变，handler 就会被调用
    //     handler(newValue, oldValue) {
    //         console.log('isHot被修改了', newValue, oldValue)
    //     }
    // })

    // 简写写法，直接写上函数，传入参数，这种写法缺点就是不能写其他配置项了，比如immediate和deep
    // vm.$watch('isHot', function (newValue, oldValue) {
    //     console.log('isHot被修改了', newValue, oldValue)
    // })
</script>

</html>